<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head th:replace="nav :: navHeaderIFrame(~{::title},~{::link})">
    <title>tinyservices-id</title>
    <link rel="stylesheet" type="text/css" th:href="@{../css/segment/segment.css}"/>
</head>
<body>
    <div id="c_win">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">业务类型</label>
                    <div class="layui-input-inline">
                        <select name="bizType"  id="bizType" lay-search="">
                            <option value="">直接选择或搜索选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="submit" class="layui-btn" id="searchBtn">查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        <table class="layui-hide" id="tableData" lay-filter="table"></table>
    </div>

    <div th:include="nav::navFooterIFrame" ></div>

    <script type="text/html" id="leftTopTool">
        <a class="layui-btn layui-btn-primary layui-btn-sm leftTopTool" data-type="add" >
            <i class="layui-icon layui-icon-addition"></i>
        </a>
    </script>

    <script type="text/html" id="barDemo" >
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">明细</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script>
        layui.use(['table','form'],function(){
            let table = layui.table,
                form = layui.form,
                $ = layui.$;

            //获取下拉框数据
            $.ajax({
                type: "get",//方法类型
                url: "/segment/listBizType",
                dataType: "json",//预期服务器返回的数据类型
                success : function(result) {
                    if(result.code===0) {
                        let data = result.data;
                        $.each(data, function (index, item) {
                            $('#bizType').append(new Option(item, item));// 下拉菜单里添加元素
                        });
                        form.render("select");
                    }else{
                       layer.msg(result.msg, {
                            icon: 2,
                            time: 3000 //如果不配置，默认是3秒
                        });
                    }
                },
                error : function(e){
                    layer.msg('服务异常');
                }
            });


            //点击查询按钮，重载表格
            $('#searchBtn').on('click', function() {
                table.reload('tableData', {
                    where : {
                        bizType: $('#bizType').val(),
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });

            table.render({
                elem: '#tableData'
                ,url: '/segment/listPage'
                ,method: 'get'
                ,request: {
                    pageName: 'pageNo' //页码的参数名称，默认：page
                    ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                ,toolbar: '#leftTopTool' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print']
                ,title: 'segment号段管理'
                ,limits: [10,20,50]//每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]
                ,limit: 10//每页默认显示的数量
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.totalSize, //解析数据长度
                        "data": res.data.data //解析数据列表
                    };
                }
                ,cols: [
                    [
                        {type: 'checkbox', fixed: 'left'}
                        ,{field:'bizType', title:'业务类型'}
                        ,{field:'beginId', title:'起始值'}
                        ,{field:'maxId', title:'最大值'}
                        ,{field:'step', title:'步长'}
                        ,{field:'createTime', title:'创建时间', width:200}
                        ,{field:'updateTime', title:'修改时间', width:200}
                        ,{field:'isNeedInit', title:'接入方式',templet: function(res){
                            return  res.isNeedInit ? "server":"sdk"
                        }}
                        ,{fixed: 'right',title:'操作', width:200, align:'center', toolbar: '#barDemo'}
                    ]
                ],done: function(res, curr, count){
                    /**
                     * 左侧自定义工具栏触发功能
                     */
                    $('.leftTopTool').on('click', function(){
                        let type = $(this).data('type');
                        active[type] ? active[type].call(this) : '';
                    });
                }
                ,page: true
            });


            //行内工具条
            table.on('tool(table)', function(obj){
                let data = obj.data;
                switch(obj.event){
                    case 'del':
                        del(data.id);
                        break;
                    case 'detail':
                        detail(data.id);
                        break;
                    case 'enabled':
                        enabled(data.id);
                        break;
                }
            });


            const active = {
                /**
                 * 新增功能
                 */
                add: function () {
                    add();
                },
                /**
                 * 批量删除
                 */
                batchDel: function () {
                    //获取选中数据
                    let checkStatus = table.checkStatus('tableData'), data = checkStatus.data;
                    if(data.length > 0){
                        let datas = data.map(item => ({id: item.id}));
                        batchDel(datas);
                    }else{
                        layer.msg("未选中需删除数据")
                    }

                },
            };

            //--------------封装通用功能
            /**
             * 新增功能
             */
            function add(){
                parent.layer.open({
                    type: 2,
                    skin: 'layui-layer-rim',
                    area: ['60%', '80%'],
                    title: '新增',
                    content: "/item/segment/add"
                });

            }

            /**
             * 明细功能
             * @param id
             */
            function detail(id){
                parent.layer.open({
                    type: 2,
                    skin: 'layui-layer-rim',
                    area: ['60%', '80%'],
                    title: '明细',
                    content: "/item/segment/detail/"+id
                });
            }

            /**
             * 删除功能
             * @param id
             */
            function del(id){
                layer.confirm("是否确定删除",{
                    title: "提示"
                    ,btn: ['确定', '取消']
                }, function () {
                    $.ajax({
                        type: "delete",//方法类型
                        url: "/segment/delete/"+id,
                        dataType: "json",//预期服务器返回的数据类型
                        success : function(result) {
                            layer.closeAll();
                            if(result.code===0){
                                table.reload('tableData', {
                                    page : {
                                        curr : 1
                                    }
                                });
                                layer.msg('删除成功');
                            }else{
                                layer.msg(result.msg, {
                                    icon: 2,
                                    time: 3000 //如果不配置，默认是3秒
                                });
                            }
                        },
                        error : function(e){
                            layer.closeAll();
                            layer.msg('服务异常');
                        }
                    });
                }, function(){
                    layer.closeAll();
                });
            }


        });

    </script>
</body>
</html>